<template>
  <div class="layout-parent w100 p10">
    <el-tabs type="border-card">
      <el-tab-pane>
        <template #label><vp-label zh="基本信息" en="Basic Info"/></template>
        <DeptHiddenTrouble
          :id="id"
          :type="'view'"
          @dataEmits="getData"
          ref="ContingencyNoticeRef"
        ></DeptHiddenTrouble>
      </el-tab-pane>
      <el-tab-pane v-if="formData.processid">
        <template #label><vp-label zh="流程记录" en="Process Record"/></template>
        <ProcessHistory :processInsId="formData.processid" />
      </el-tab-pane>
      <el-tab-pane v-if="formData.processid">
        <template #label><vp-label zh="流程图" en="Process Chart"/></template>
        <ProcessView :processInsId="formData.processid" />
      </el-tab-pane>
      <el-tab-pane>
        <template #label><vp-label zh="操作记录" en="Operation Record"/></template>
        <RcList :id="formData.id" ref="rcListRef"></RcList>
      </el-tab-pane>
    </el-tabs>
    <StatusBar
      :id="formData.id"
      :status="formData.zt"
      :isValid="formData.yxbs"
    />
  </div>
</template>
<script lang="ts">
import { defineComponent,  reactive, ref, toRefs } from "vue";
import { useI18n } from "vue-i18n";
import { useRouter } from "vue-router";
import DeptHiddenTrouble from "./DeptHiddenTrouble.vue";
import RcList from "/@/components/vp/operationRecord/VpOperationRecordCard.vue";
import ProcessHistory from '/@/components/vp/workflow/ProcessHistory.vue';
import ProcessView from "/@/components/vp/workflow/ProcessView.vue";
import StatusBar from '/@/components/vp/status/StatusBar.vue';

export default defineComponent({
  name: "viewDeptHiddenTrouble",
  props: {
    id: String,
  },
  components: {
    RcList,
    DeptHiddenTrouble,
    ProcessHistory,
    ProcessView,
    StatusBar,
  },
  emits: ["formSubmited"],
  setup(props, context) {
    const state = reactive({
      type: "add",
      loading: false,
      saveLoading: false,
      formData: {
        id: "",
        zt: 10,
        yxbs: 1,
        jb: "",
        lx: "",
        processid: "",
        cnbs: null,
        cnsm: "",
        clrid: "",
        clrq: "",
        cljg: "",
        clr: "",
        handles: [],
      },
    });

    const editDialogRef = ref();
    const router = useRouter();
    const ContingencyNoticeRef = ref();
    const { t } = useI18n();

    const getData = (data: any) => {
      state.formData = data;
      console.info(state.formData);
    };

    return {
      ...toRefs(state),
      ...toRefs(props),
      editDialogRef,
      ContingencyNoticeRef,
      getData,
    };
  },
});
</script>

<style lang="scss" scoped>
.drawer {
  :deep(.el-checkbox__label) {
    min-width: 80px;
  }
}
</style>
